<template>
    <div
        class="accountBalance"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="查询服务类 --> 加油卡余额查询">
            <template slot="cardBody">
                <el-form
                    class="searchForm"
                    ref="searchForm"
                    :inline="true"
                    label-position="right"
                    size="small"
                    label-width="80px"
                >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                                <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="btnBoxs">
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="handleSearch"
                            >查 询</el-button>
                        </el-col>
                    </el-row>
                </el-form>

                <!-- 查询信息显示 -->
                <div class="searchContent" v-if="showFlag">
                    <el-card class="box-card">
                        <div class="clearfix" slot="headerss">
                            <span>加油卡余额查询</span>
                        </div>
                        <div class="infoBox">
                            <el-row class="infoItem">
                                <el-col class="title" :span="12">卡号：</el-col>
                                <el-col class="text" :span="12">{{ cardInfo_3004.CARDNO }}</el-col>
                            </el-row>
                            <el-row class="infoItem">
                                <el-col class="title" :span="12">用户姓名：</el-col>
                                <el-col class="text" :span="12">{{ showData.UserName }}</el-col>
                            </el-row>
                            <el-row class="infoItem">
                                <el-col class="title" :span="12">客户类型名称：</el-col>
                                <el-col class="text" :span="12">{{ showData.CardTypeName }}</el-col>
                            </el-row>
                            <el-row class="infoItem">
                                <el-col class="title" :span="12">可充备用金：</el-col>
                                <el-col class="text" :span="12">{{ showData.EableBalance }}</el-col>
                            </el-row>
                            <el-row class="infoItem">
                                <el-col class="title" :span="12">石油卡卡号：</el-col>
                                <el-col class="text" :span="12">{{ showData.CardNum }}</el-col>
                            </el-row>
                        </div>
                    </el-card>
                </div>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { cardProductCheck } from '@/utils/menuRules';
import { getDictValue } from '@/utils/Common';

export default {
    name: 'accountBalance',
    components: {
        cardComponent,
    },
    data() {
        return {
            title: 'accountBalance',
            showFlag: false, // 查询信息内容显示控制阀
            pageLoading: false, // 确定按钮loading
            showData: {
                UserName: '', // 用户姓名
                CardTypeName: '', // 客户类型名称
                EableBalance: '', // 可充备用金
                CardNum: '', // 石油卡卡号 -- 3004交易获取
            },
        };
    },

    created() {
        // 菜单校验
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        inlineParams: state => state.common.inlineParams, // 接口默认参数  --行内交易
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    mounted() {
        this.init();
    },

    methods: {

        // 初始化
        async init() {
            // 查询数据库字典 获取 卡产品名称
            const productName = await getDictValue(this.cardList_3601, this.cardInfo_3004.CARDNO, 'PRODUCT', this);

            // 菜单校验
            const checkFlag = await cardProductCheck(productName, this.cardInfo_3004, this);

            if (checkFlag) {
                // 获取页面初始化查询数据
                this.handleSearch();
            }
        },

        // 确定按钮点击处理事件
        handleSearch() {
            this.pageLoading = true;
            this.handleDealH004();
        },

        // 跑 H004 交易
        handleDealH004() {
            // 设置请求参数 -- H004 交易
            const appBody = {
                endTime: '00', // 时间区间内的结束时间
                startTime: '', // 时间区间内的开始时间
                MethodId: '1', // 业务Id
                UserId: '81004', // 用户编号
                CardNum: this.cardInfo_3004.CARDNO, // 卡号
                InfoType: '100', // 信息类别
            };
            const params = JSON.parse(JSON.stringify(this.inlineParams));
            params.body.appHead.tranCode = 'H004';
            params.body.appBody = appBody;

            // 跑 H004 交易
            this.$post.inlineTransModule.transH004(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result--H004');
                    if (result.sysHead.rspCd === '000000') {
                        for (const key in this.showData) {
                            this.showData[key] = result.body.appBody[key] || '';
                        }
                        this.showFlag = true;
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },
    },
};
</script>
<style lang="scss">
.accountBalance {
    .searchContent {
        .el-card__header {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 3px;
        }
    }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.accountBalance {
    min-height: 100%;
    // background-color: #fff;
    // border-radius: 8px;
    overflow: hidden;

    .searchContent {
        margin-top: 30px;

        .infoItem {
            font-size: 16px;
            color: #999;
            text-align: left;
            margin-bottom: 20px;

            .title {
                color: #000;
                text-align: right;
                padding-right: 20px;
            }
        }
    }

    .btnBoxs {
        text-align: right;
    }
}
</style>
